<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>患者标签</title>
    <style>
      @media print {
        html,body {
          margin: 0;
          padding: 0;
          font-size: 0.3mm;
        }
        @page {
          size: 40mm 30mm;
          margin: 0;
        }
        #app {
          overflow: hidden;
          padding: 3mm 2mm 0 2mm;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
        }
        .img-box {
          padding-bottom: 2mm;
        }
        .img {
          display: block;
          margin: 0 auto;
          width: 90%;
          height: 5mm;
        }
        .border1 {
          border-bottom: 0.1mm solid black;
        }
        .user-box {
          transform: scale(0.8, 0.8);
        }
      }
    </style>
  </head>
  <body>
    <div id="app" v-if="userInfo">
      <div class="img-box border1">
        <img class="img" :src="userInfo.barCode" alt="" />
      </div>
      <div class="user-box">
        <div>
          姓名：{{ userInfo.name }}
        </div>
        <div>性别：{{ userInfo.sex == 1 ? "男" : "女" }}</div>
        <div>出生日期：{{ userInfo.birthday }}</div>
        <div>病案号：{{ userInfo.archivesCode }}</div> 
        <!-- <div>手机号：{{ userInfo.mobile }}</div> -->
      </div>
    </div>
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          userInfo: null
        },
        mounted() {
          var th = this;
          var fn = function() {
            //这里要判断图片是否加载完成
            var imgs = document.getElementsByTagName("img");
            var timer = setInterval(() => {
              var i = 0;
              for (var index = 0; index < imgs.length; index++) {
                var element = imgs[index];
                if (element.complete) {
                  i++;
                }
              }
              if (i == imgs.length) {
                clearInterval(timer);
                window.print();
              }
            }, 500);
          };
          window.addEventListener("message", function(e) {
            th.userInfo = e.data;
            th.$nextTick(function() {
              fn();
            });
          });
        }
      });
    </script>
  </body>
</html>
